<template>
    <div>
        <LinearBox
            boxWidth="11.83rem"
            boxHeight="5.83rem"
            smallWidth="8.42rem"
            boxBgc="#32d296"
            shadowColor="rgba(50, 210, 150, 0.2)"
            roundColor="rgba(97, 235, 199, 1)"
        ></LinearBox>

        <LinearBox
            boxWidth="11.83rem"
            boxHeight="5.83rem"
            smallWidth="8.42rem"
            boxBgc="linear-gradient(180deg, #40BCF9 0%, #1E87F0 100%)"
            shadowColor="rgba(30, 135, 240, 0.2)"
            roundColor="rgba(95, 202, 255, 1)"
        ></LinearBox>

        <LinearBox
            boxWidth="8.42rem"
            boxHeight="5.83rem"
            smallWidth="5.25rem"
            boxBgc="linear-gradient(180deg, #40BCF9 0%, #1E87F0 100%)"
            shadowColor="rgba(30, 135, 240, 0.2)"
            roundColor="rgba(95, 202, 255, 1)"
            bigRoundTop="-80%"
            bigRoundLeft="15%"
            smallRoundBottom="-35%"
            smallRoundRight="-30%"
        ></LinearBox>
        <LinearBox
            boxWidth="8.42rem"
            boxHeight="5.83rem"
            smallWidth="5.25rem"
            boxBgc="#32d296"
            shadowColor="rgba(50, 210, 150, 0.2)"
            roundColor="rgba(97, 235, 199, 1)"
            bigRoundTop="-80%"
            bigRoundLeft="15%"
            smallRoundBottom="-35%"
            smallRoundRight="-30%"
        ></LinearBox>
    </div>
</template>

<script>
import LinearBox from '@/components/LinearBox';

export default {
    name: 'Index',
    components: { LinearBox }
};
</script>

<style lang="less" scoped></style>
